<template>
  <div class="app">
    <el-breadcrumb
      separator-class="el-icon-arrow-left"
      style="float:right;margin-right:20px;ub main-center cross-center"
    >
      <el-breadcrumb-item :to="{ path: '/' }">商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>

      <el-breadcrumb-item>配送中心</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 查询信息的表单 -->
    <el-form
      style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); margin-top:20px;border-bottom:1px solid rgba(0, 0, 0, 0.1); "
      ref="form"
      :model="form"
      label-width="150px"
    >
      <!-- <el-form-item label="一级分类名称"> -->
      <el-input
        class="input"
        placeholder="一级分类名称"
        v-model="form.firstName"
        clearable
        @clear="search"
      ></el-input>
      <!-- </el-form-item> -->
      <!-- <el-form-item label="二级分类名称"> -->
      <el-input
        class="input"
        placeholder="二级分类名称"
        v-model="form.secondName"
        clearable
        @clear="search"
      ></el-input>
      <!-- </el-form-item> -->
      <!-- <el-form-item label="时间"> -->
      <el-date-picker
        class="input2"
        v-model="form.date"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        clearable
        @clear="search"
      ></el-date-picker>

      <!-- </el-form-item> -->
      <el-button @click="search1()" class="btn1" type="primary" plain>查询</el-button>

      <el-button @click="dialogFormVisible = true;firstname();" class="btn1" type="primary" plain>增加商品</el-button>
      <!-- <el-button class="btn1" type="primary" @click="dialogFormVisible1 = true">修改商品</el-button> -->
      <el-divider></el-divider>
      <el-input
        class="input"
        placeholder="商品代码id"
        v-model="updateCommodity.id"
        clearable
        @clear="search"
      ></el-input>
      <el-button class="btn1" type="primary" @click="delCommodity">删除商品</el-button>
    </el-form>

    <!-- 添加商品按钮的弹出的表单 -->
    <!-- <el-dialog style="width:1700px;text-align:center;" title="新增商品" :visible.sync="dialogFormVisible">
  <el-form  ref="addCommodity" :model="addCommodity">
   
    <el-form-item  label="" :label-width="formLabelWidth">
      <span class="s">金额</span>
      <el-input class="el-input" v-model="addCommodity.amount" autocomplete="off"></el-input>
      <span class="s1">商品编号</span>
      <el-input class="el-input" v-model="addCommodity.commodityCode" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="" :label-width="formLabelWidth">
      <span class="s">成本价</span>
      <el-input class="el-input" v-model="addCommodity.costPrice" autocomplete="off"></el-input>
      <span class="s1">折扣</span>
        <el-input class="el-input" v-model="addCommodity.discount" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="" :label-width="formLabelWidth">
      <span class="s">一级分类名称</span>
        <el-select style="margin-left:-10px; width:290px;" v-model="addCommodity.firstClassification" placeholder="请选择活动区域">
      <el-option label="衣服" value="衣服"></el-option>
      <el-option label="裤子" value="裤子"></el-option>
      <el-option label="鞋子" value="鞋子"></el-option>
    </el-select>
     <span class="s1">二级分类名称</span>
         <el-select style="margin-left:-10px; width:290px;" v-model="addCommodity.secondClassification" placeholder="请选择活动区域">
      <el-option label="八分裤" value="八分裤"></el-option>
      <el-option label="秋裤" value="秋裤"></el-option>
      <el-option label="拖鞋" value="拖鞋"></el-option>
      <el-option label="凉鞋" value="凉鞋"></el-option>
      <el-option label="西装" value="西装"></el-option>
      <el-option label="衬衫" value="衬衫"></el-option>
         </el-select>
    </el-form-item>
    <el-form-item label="" :label-width="formLabelWidth">
      <span class="s">可否换货</span>
       <el-switch v-model="addCommodity.isExchange" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
       <span class="s1">可否退货</span>
         <el-switch v-model="addCommodity.isReturn" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
    </el-form-item>
    <el-form-item label="" :label-width="formLabelWidth">
      <span class="s">型号</span>
       <el-input class="el-input" v-model="addCommodity.model" autocomplete="off"></el-input>
       <span class="s1">商品说明</span>
         <el-input class="el-input" v-model="addCommodity.productDesccription" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="" :label-width="formLabelWidth">
      <span class="s">商品名称</span>
     <el-input class="el-input" v-model="addCommodity.productName" autocomplete="off"></el-input>
     <span class="s1">备注</span>
       <el-input class="el-input" v-model="addCommodity.remark" autocomplete="off"></el-input>
    </el-form-item>
     <el-form-item label="" :label-width="formLabelWidth">
       <span class="s">库存量</span>
        <el-input class="el-input" v-model="addCommodity.inventory" autocomplete="off"></el-input>
       <span class="s1">保质期限</span>
       <el-input class="el-input" v-model="addCommodity.shelfLife" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="" :label-width="formLabelWidth">
      <span class="s">供应商</span>
      <el-input class="el-input" v-model="addCommodity.supplier" autocomplete="off"></el-input>
      <span class="s1">单价</span>
        <el-input class="el-input" v-model="addCommodity.unitPrice" autocomplete="off"></el-input>   
    </el-form-item>
    <el-form-item label="" :label-width="formLabelWidth">
      <span class="s">计量单位</span>
        <el-input class="el-input" v-model="addCommodity.unitofmeasurement" autocomplete="off"></el-input>
        <span class="s1">厂商</span>
        <el-input class="el-input" v-model="addCommodity.vendor" autocomplete="off"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" style="text-align:center;" class="dialog-footer">
    <el-button class="btn1" @click="dialogFormVisible = false">取 消</el-button>
    <el-button class="btn1" type="primary" @click="dialogFormVisible = false;add()">确 定</el-button>
  </div>
    </el-dialog>-->

    <!-- 添加商品单弹出框 -->
    <el-dialog
      style="width:1600px;text-align:center;"
      title="新增商品"
      :visible.sync="dialogFormVisible"
    >
      <el-form
        style="height:540px;"
        :rules="rules"
        ref="addCommodity"
        :model="addCommodity"
        label-width="120px"
      >
        <!-- 左边区域 -->
        <div class="dialog-left" style="float:left;">
          <el-form-item label="商品编号" style="margin-top:20px;" prop="commodityCode">
            <el-input class="el-input" v-model="addCommodity.commodityCode" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item prop="productName" style="margin-top:20px;" label="商品名称">
            <el-input class="el-input" v-model="addCommodity.productName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="金额" style="margin-top:20px;" prop="amount">
            <el-input class="el-input1" v-model="addCommodity.amount" autocomplete="off"></el-input>(元)
          </el-form-item>
          <el-form-item label="成本价" style="margin-top:20px;" prop="costPrice">
            <el-input class="el-input1" v-model="addCommodity.costPrice" autocomplete="off"></el-input>(元)
          </el-form-item>
          <el-form-item label="折扣" style="margin-top:20px;" prop="discount">
            <el-input class="el-input1" v-model="addCommodity.discount" autocomplete="off"></el-input>(折)
          </el-form-item>
          <el-form-item label="一级分类名称" style="margin-top:20px;" prop="firstClassification">
            <el-select @change="changestatus()" style="width:200px;" v-model="firstName" placeholder="请选择活动区域">
              <el-option
                v-for="(item, index) in firstClassification"
                :key="index"
                :label="item.item"
                :value="item.value"
              ></el-option>
              <!-- <el-option label="衣服" value="衣服"></el-option>
      <el-option label="裤子" value="裤子"></el-option>
      <el-option label="鞋子" value="鞋子"></el-option>
      <el-option label="帽子" value="帽子"></el-option>
              <el-option label="袜子" value="袜子"></el-option>-->
            </el-select>
          </el-form-item>
          <el-form-item label="二级分类名称" style="margin-top:20px;" prop="secondClassification">
            <el-select
              style="width:200px;"
              v-model="secondName"
              placeholder="请选择活动区域"
              :disabled="ischoice"> 
            <el-option 
             v-for="(item, index) in secondClassification"
                :key="index"
                :label="item.item"
                :value="item.value"
            ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="isExchange" style="margin-top:20px;" label="是否换货">
            <el-switch
              v-model="updateCommodity.isExchange"
              active-color="#13ce66"
              inactive-color="#ff4949"
            ></el-switch>
          </el-form-item>
          <el-form-item prop="isReturn" style="margin-top:20px;" label="是否退货">
            <el-switch
              v-model="updateCommodity.idReturn"
              active-color="#13ce66"
              inactive-color="#ff4949"
            ></el-switch>
          </el-form-item>
        </div>
        <!-- 右边区域 -->
        <div class="dialog-right" style="float:right;">
          <el-form-item prop="supplier" label="供应商" style="margin-top:20px;">
            <el-input class="el-input" v-model="addCommodity.supplier" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item prop="model" label="型号" style="margin-top:20px;">
            <el-input class="el-input" v-model="addCommodity.model" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item prop="productDesccription" label="商品说明" style="margin-top:20px;">
            <el-input
              class="el-input"
              v-model="addCommodity.productDesccription"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item prop="inventory" label="库存量" style="margin-top:20px;">
            <el-input class="el-input1" v-model="addCommodity.inventory" autocomplete="off"></el-input>(件)
          </el-form-item>
          <el-form-item prop="shelfLife" label="保质期限" style="margin-top:20px;">
            <el-input class="el-input" v-model="addCommodity.shelfLife" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item prop="unitPrice" label="单价" style="margin-top:20px;">
            <el-input class="el-input1" v-model="addCommodity.unitPrice" autocomplete="off"></el-input>(元)
          </el-form-item>
          <el-form-item prop="unitofmeasurement" label="计量单位" style="margin-top:20px;">
            <el-input class="el-input1" v-model="addCommodity.unitofmeasurement" autocomplete="off"></el-input>(位)
          </el-form-item>
          <el-form-item prop="vendor" label="厂商" style="margin-top:20px;">
            <el-input class="el-input" v-model="addCommodity.vendor" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item prop="remark" label="备注" style="margin-top:20px;">
            <el-input class="el-input" v-model="addCommodity.remark" autocomplete="off"></el-input>
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" style="text-align:center;" class="dialog-footer">
        <el-button class="btn1" @click="dialogFormVisible = false">取 消</el-button>
        <el-button class="btn1" :disabled="isSecond" type="primary" @change="addchange" @click="dialogFormVisible = false;add()">确 定</el-button>
      </div>
    </el-dialog>

    <!-- //修改商品的弹出框 -->
    <!-- <el-dialog style="width:1700px;text-align:center;" title="修改商品" :visible.sync="dialogFormVisible1">
  <el-form   :model="updateCommodity" class="demo-ruleForm">
    <el-form-item prop="id" :label-width="formLabelWidth">
       <span class="s">商品代码</span>
       <el-input style="width:650px;" v-model="updateCommodity.id" autocomplete="off" disabled></el-input>
    </el-form-item>
    <el-form-item label="" :label-width="formLabelWidth">
      <span class="s">金额</span>
      <el-input class="el-input" v-model="updateCommodity.amount" autocomplete="off"></el-input>
      <span class="s1">商品编号</span>
      <el-input class="el-input" v-model="updateCommodity.commodityCode" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="" :label-width="formLabelWidth">
      <span class="s">成本价</span>
      <el-input class="el-input" v-model="updateCommodity.commodityCode" autocomplete="off"></el-input>
      <span class="s1">折扣</span>
        <el-input class="el-input" v-model="updateCommodity.discount" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="" :label-width="formLabelWidth">
      <span class="s">一级分类名称</span>

        <el-select style="margin-left:-10px; width:290px;" v-model="updateCommodity.firstClassification" placeholder="请选择活动区域">
      <el-option label="衣服" value="衣服"></el-option>
      <el-option label="裤子" value="裤子"></el-option>
      <el-option label="鞋子" value="鞋子"></el-option>
    </el-select>
     <span class="s1">二级分类名称</span>
      
         <el-select style="margin-left:-10px; width:290px;" v-model="updateCommodity.secondClassification" placeholder="请选择活动区域">
      <el-option label="八分裤" value="八分裤"></el-option>
      <el-option label="秋裤" value="秋裤"></el-option>
      <el-option label="拖鞋" value="拖鞋"></el-option>
         </el-select>
    </el-form-item>
    <el-form-item label="" :label-width="formLabelWidth">
      <span class="s">可否换货</span>
       <el-switch v-model="updateCommodity.isExchange" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
       <span class="s1">可否退货</span>
         <el-switch v-model="updateCommodity.isReturn" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
    </el-form-item>
    <el-form-item label="" :label-width="formLabelWidth">
      <span class="s">型号</span>
       <el-input class="el-input" v-model="updateCommodity.model" autocomplete="off"></el-input>
       <span class="s1">商品说明</span>
         <el-input class="el-input" v-model="updateCommodity.productDesccription" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="" :label-width="formLabelWidth">
      <span class="s">商品名称</span>
     <el-input class="el-input" v-model="updateCommodity.productName" autocomplete="off"></el-input>
     <span class="s1">备注</span>
       <el-input class="el-input" v-model="updateCommodity.remark" autocomplete="off"></el-input>
    </el-form-item>
     <el-form-item label="" :label-width="formLabelWidth">
      <span class="s">库存量</span>
        <el-input class="el-input" v-model="updateCommodity.inventory" autocomplete="off"></el-input>
       <span class="s1">保质期限</span>
       <el-input class="el-input" v-model="updateCommodity.shelfLife" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="" :label-width="formLabelWidth">
      <span class="s">供应商</span>
      <el-input class="el-input" v-model="updateCommodity.supplier" autocomplete="off"></el-input>
      <span class="s1">单价</span>
        <el-input class="el-input" v-model="updateCommodity.unitPrice" autocomplete="off"></el-input>   
    </el-form-item>
    <el-form-item label="" :label-width="formLabelWidth">
      <span class="s">计量单位</span>
        <el-input class="el-input" v-model="updateCommodity.unitofmeasurement" autocomplete="off"></el-input>
        <span class="s1">厂商</span>
        <el-input class="el-input" v-model="updateCommodity.vendor" autocomplete="off"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer"  style="text-align:center;" class="dialog-footer">
    <el-button class="btn1" @click="dialogFormVisible1 = false">取 消</el-button>
    <el-button class="btn1" type="primary" @click="dialogFormVisible1 = false;update('updateCommodity')">确 定</el-button>
  </div>
    </el-dialog>-->

    <el-dialog
      style="width:1600px;text-align:center;"
      title="修改商品"
      :visible.sync="dialogFormVisible1"
    >
      <el-form
        style="height:560px;margin-top:-30px;"
        :rules="rules1"
        ref="updateCommodity"
        :model="updateCommodity"
        label-width="120px"
      >
        <!-- 左边区域 -->
        <el-form-item prop="id" label="商品代码" style="margin-top:20px;">
          <el-input class="el-input2" v-model="updateCommodity.id" autocomplete="off" disabled></el-input>
        </el-form-item>
        <div class="dialog-left" style="float:left">
          <el-form-item prop="productName" label="商品名称" style="margin-top:20px;">
            <el-input class="el-input" v-model="updateCommodity.productName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="金额" prop="amount" style="margin-top:20px;">
            <el-input class="el-input1" v-model="updateCommodity.amount" autocomplete="off"></el-input>(元)
          </el-form-item>
          <el-form-item label="成本价" prop="costPrice" style="margin-top:20px;">
            <el-input class="el-input1" v-model="updateCommodity.costPrice" autocomplete="off"></el-input>(元)
          </el-form-item>
          <el-form-item label="折扣" prop="discount" style="margin-top:20px;">
            <el-input class="el-input1" v-model="updateCommodity.discount" autocomplete="off"></el-input>(折)
          </el-form-item>
          <el-form-item label="一级分类名称" prop="firstClassification" style="margin-top:20px;">
            <el-select
              style="width:200px;"
              v-model="updateCommodity.firstClassification"
              placeholder="请选择活动区域"
            >
              <el-option label="衣服" value="衣服"></el-option>
              <el-option label="裤子" value="裤子"></el-option>
              <el-option label="鞋子" value="鞋子"></el-option>
              <el-option label="帽子" value="帽子"></el-option>
              <el-option label="袜子" value="袜子"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="二级分类名称" prop="secondClassification" style="margin-top:20px;">
            <el-select
              style="width:200px;"
              v-model="updateCommodity.secondClassification"
              placeholder="请选择活动区域"
            >
              <el-option label="八分裤" value="八分裤"></el-option>
              <el-option label="秋裤" value="秋裤"></el-option>
              <el-option label="高帮鞋" value="高帮鞋"></el-option>
              <el-option label="地板鞋" value="地板鞋"></el-option>
              <el-option label="西装" value="西装"></el-option>
              <el-option label="衬衫" value="衬衫"></el-option>
              <el-option label="红帽" value="红帽"></el-option>
              <el-option label="太空帽" value="太空帽"></el-option>
              <el-option label="短袜" value="短袜"></el-option>
              <el-option label="长袜" value="长袜"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="isExchange" label="是否换货" style="margin-top:20px;">
            <el-switch
              v-model="updateCommodity.isExchange"
              active-color="#13ce66"
              inactive-color="#ff4949"
            ></el-switch>
          </el-form-item>
          <el-form-item prop="vendor" label="厂商" style="margin-top:20px;">
            <el-input class="el-input" v-model="updateCommodity.vendor" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item prop="remark" label="备注" style="margin-top:20px;">
            <el-input class="el-input" v-model="updateCommodity.remark" autocomplete="off"></el-input>
          </el-form-item>
        </div>
        <!-- 右边区域 -->
        <div class="dialog-right" style="float:left">
          <el-form-item label="商品编号" prop="commodityCode" style="margin-top:20px;">
            <el-input class="el-input" v-model="updateCommodity.commodityCode" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item prop="supplier" label="供应商" style="margin-top:20px;">
            <el-input class="el-input" v-model="updateCommodity.supplier" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item prop="model" label="型号" style="margin-top:20px;">
            <el-input class="el-input" v-model="updateCommodity.model" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item prop="productDesccription" label="商品说明" style="margin-top:20px;">
            <el-input
              class="el-input"
              v-model="updateCommodity.productDesccription"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item prop="inventory" label="库存量" style="margin-top:20px;">
            <el-input class="el-input1" v-model="updateCommodity.inventory" autocomplete="off"></el-input>(件)
          </el-form-item>
          <el-form-item prop="shelfLife" label="保质期限" style="margin-top:20px;">
            <el-input class="el-input" v-model="updateCommodity.shelfLife" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item prop="isReturn" label="是否退货" style="margin-top:20px;">
            <el-switch
              v-model="updateCommodity.idReturn"
              active-color="#13ce66"
              inactive-color="#ff4949"
            ></el-switch>
          </el-form-item>
          <el-form-item prop="unitPrice" label="单价" style="margin-top:20px;">
            <el-input class="el-input1" v-model="updateCommodity.unitPrice" autocomplete="off"></el-input>(元)
          </el-form-item>
          <el-form-item prop="unitofmeasurement" label="计量单位" style="margin-top:20px;">
            <el-input
              class="el-input1"
              v-model="updateCommodity.unitofmeasurement"
              autocomplete="off"
            ></el-input>(位)
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" style="text-align:center;" class="dialog-footer">
        <el-button class="btn1" @click="dialogFormVisible1 = false">取 消</el-button>
        <el-button
          class="btn1"
          type="primary"
          @click="dialogFormVisible1 = false;update('updateCommodity')"
        >确 定</el-button>
      </div>
    </el-dialog>

    <!-- //表格 -->
    <el-table ref="filterTable" :data="getCommodity" v-loading="loading" style="width: 100%">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column label="#" type="index" fixed></el-table-column>
      <el-table-column
        prop="id"
        label="商品代码"
        sortable
        width="120"
        column-key="id"
        :filters="[{text: '01', value: '01'}, {text: '02', value: '02'}, {text: '03', value:'03'}, {text: '04', value: '04'}, {text: '04', value: '04'}, {text: '04', value: '04'}, {text: '05', value: '05'}, {text: '06', value: '06'}]"
      >
      </el-table-column>
      <el-table-column prop="commodityCode" label="商品编号"></el-table-column>
      <el-table-column prop="firstClassification" label="一级分类名称" width="120"></el-table-column>
      <el-table-column prop="secondClassification" label="二级分类名称" width="120"></el-table-column>
      <el-table-column prop="productName" label="商品名称" width="100"></el-table-column>
      <el-table-column prop="supplier" label="供应商" width="100"></el-table-column>
      <el-table-column prop="amount" label="金额" width="120"></el-table-column>
      <el-table-column prop="costPrice" label="成本价" width="100"></el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="160"></el-table-column>
      <el-table-column prop="updateTime" label="更新时间" width="160"></el-table-column>
      <el-table-column prop="discount" label="折扣" width="100"></el-table-column>
      <el-table-column prop="inventory" label="库存量" width="100"></el-table-column>
      <el-table-column prop="isExchange" label="可否换货" width="100">
        <template slot-scope="scope">
          <!-- {{scope.row}} -->
          <el-switch v-model="scope.row.isExchange" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="isReturn" label="可否退货" width="100">
        <template slot-scope="scope">
          <!-- {{scope.row}} -->
          <el-switch v-model="scope.row.isReturn" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="model" label="型号" width="100"></el-table-column>
      <el-table-column prop="productDesccription" label="商品说明" width="100"></el-table-column>
      <el-table-column prop="remark" label="备注" width="100"></el-table-column>
      <el-table-column prop="shelfLife" label="保质期限" width="160"></el-table-column>
      <el-table-column prop="unitPrice" label="单价" width="100"></el-table-column>
      <el-table-column prop="unitofmeasurement" label="计量单位" width="100"></el-table-column>
      <el-table-column prop="vendor" label="厂商" width="100"></el-table-column>
      <el-table-column style="text-align:center;" label="操作" fixed="right" width="180px">
        <template slot-scope="scope">
          <el-tooltip effect="dark" content="编辑" placement="top" :enterable="false">
            <el-button
              class="btn3"
              icon="el-icon-edit"
              type="primary"
              size="mini"
              @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button>
          </el-tooltip>
          <el-tooltip effect="dark" content="删除" placement="top" :enterable="false">
            <el-button
              class="btn4"
              icon="el-icon-delete"
              size="mini"
              type="danger"
              @click="handleDelete(scope.row)"
            >删除</el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[4, 5, 10]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isSecond:true,
      id:'',
      ischoice:true,
      secondName:'',
      secondClassification:[],
      firstClassification: [],
      firstName: "",
      pageSize: 4,
      pageNum: 1,
      formLabelWidth: "120px",
      loading: true,
      // value:this.getCommodity.isExchange,
      total: 0,
      queryInfo: {
        query: "",
        pageNum: 1,
        pageSize: 10,
        currentPage: "",
      },
      delid: "",
      dialogFormVisible: false,
      dialogFormVisible1: false,
      form: {
        date: [new Date(), new Date()],
        firstName: "",
        secondName: "",
      },
      getCommodity: [],
      addCommodity: {
        amount: "",
        commodityCode: "",
        costPrice: "",
        discount: "",
        firstClassification: "",
        inventory: "",
        isExchange: "",
        isReturn: "",
        model: "",
        productDesccription: "",
        productName: "",
        remark: "",
        secondClassification: "",
        shelfLife: "",
        supplier: "",
        unitPrice: "",
        unitofmeasurement: "",
        vendor: "",
      },
      updateCommodity: {
        amount: "",
        commodityCode: "",
        costPrice: "",
        discount: "",
        firstClassification: "",
        id: "",
        inventory: "",
        isExchange: "",
        isReturn: "",
        model: "",
        productDesccription: "",
        productName: "",
        remark: "",
        secondClassification: "",
        shelfLife: "",
        supplier: "",
        unitPrice: "",
        unitofmeasurement: "",
        vendor: "",
      },
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      rules: {
        amount: [
          { required: true, message: "请输入金额", trigger: "blur" },
          {
            min: 1,
            max: 10,
            message: "长度在 1 到 10 个字符",
            trigger: "blur",
          },
        ],
        commodityCode: [
          { required: true, message: "请输入商品编号", trigger: "blur" },
          {
            min: 1,
            max: 10,
            message: "长度在 1 到 10 个字符",
            trigger: "blur",
          },
        ],
        costPrice: [
          { required: true, message: "请输入成本价", trigger: "blur" },
          {
            min: 1,
            max: 10,
            message: "长度在 1 到 10 个字符",
            trigger: "blur",
          },
        ],
        discount: [
          { required: true, message: "请输入折扣", trigger: "blur" },
          {
            min: 1,
            max: 10,
            message: "长度在 1 到 10 个字符",
            trigger: "blur",
          },
        ],
        firstClassification: [
          { required: true, message: "请输入一级分类名称", trigger: "blur" },
          {
            min: 1,
            max: 10,
            message: "长度在 1 到 10 个字符",
            trigger: "blur",
          },
        ],
        inventory: [
          { required: true, message: "请输入库存量", trigger: "blur" },
          {
            min: 1,
            max: 10,
            message: "长度在 1 到 10 个字符",
            trigger: "blur",
          },
        ],
        isExchange: [
          { required: true, message: "请输入可否换货", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        isReturn: [
          { required: true, message: "请输入可否退货", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        model: [
          { required: true, message: "请输入型号", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "长度在 3 到 10 个字符",
            trigger: "blur",
          },
        ],
        productDesccription: [
          { required: true, message: "请输入商品说明", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "长度在 3 到 10 个字符",
            trigger: "blur",
          },
        ],
        productName: [
          { required: true, message: "请输入商品名称", trigger: "blur" },
          {
            min: 1,
            max: 10,
            message: "长度在 1 到 10 个字符",
            trigger: "blur",
          },
        ],
        remark: [
          { required: true, message: "请输入备注", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        secondClassification: [
          { required: true, message: "请输入二级分类名称", trigger: "blur" },
          {
            min: 1,
            max: 10,
            message: "长度在 1 到 10 个字符",
            trigger: "blur",
          },
        ],
        shelfLife: [
          { required: true, message: "请输入保质期限", trigger: "blur" },
          {
            min: 1,
            max: 20,
            message: "长度在 1 到 20 个字符",
            trigger: "blur",
          },
        ],
        vendor: [
          { required: true, message: "请输入厂商", trigger: "blur" },
          {
            min: 1,
            max: 10,
            message: "长度在 1 到 10 个字符",
            trigger: "blur",
          },
        ],
        supplier: [
          { required: true, message: "请输入供应商", trigger: "blur" },
          {
            min: 1,
            max: 10,
            message: "长度在 1 到 10 个字符",
            trigger: "blur",
          },
        ],
        unitPrice: [
          { required: true, message: "请输入单价", trigger: "blur" },
          {
            min: 1,
            max: 10,
            message: "长度在 1 到 10 个字符",
            trigger: "blur",
          },
        ],
        unitofmeasurement: [
          { required: true, message: "请输入计量单位", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
      },
      rules1: {
        id: [
          { required: true, message: "请输入商品代码", trigger: "blur" },
          {
            min: 1,
            max: 10,
            message: "长度在 1 到 10 个字符",
            trigger: "blur",
          },
        ],
        amount: [
          { required: true, message: "请输入金额", trigger: "blur" },
          {
            min: 1,
            max: 10,
            message: "长度在 1 到 10 个字符",
            trigger: "blur",
          },
        ],
        commodityCode: [
          { required: true, message: "请输入商品编号", trigger: "blur" },
          {
            min: 1,
            max: 10,
            message: "长度在 1 到 10 个字符",
            trigger: "blur",
          },
        ],
        costPrice: [
          { required: true, message: "请输入成本价", trigger: "blur" },
          {
            min: 1,
            max: 10,
            message: "长度在 1 到 10 个字符",
            trigger: "blur",
          },
        ],
        discount: [
          { required: true, message: "请输入折扣", trigger: "blur" },
          {
            min: 1,
            max: 10,
            message: "长度在 1 到 10 个字符",
            trigger: "blur",
          },
        ],
        firstClassification: [
          { required: true, message: "请输入一级分类名称", trigger: "blur" },
          {
            min: 1,
            max: 10,
            message: "长度在 1 到 10 个字符",
            trigger: "blur",
          },
        ],
        inventory: [
          { required: true, message: "请输入库存量", trigger: "blur" },
          {
            min: 1,
            max: 10,
            message: "长度在 1 到 10 个字符",
            trigger: "blur",
          },
        ],
        isExchange: [
          { required: true, message: "请输入可否换货", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        isReturn: [
          { required: true, message: "请输入可否退货", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        model: [
          { required: true, message: "请输入型号", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "长度在 3 到 10 个字符",
            trigger: "blur",
          },
        ],
        productDesccription: [
          { required: true, message: "请输入商品说明", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "长度在 3 到 10 个字符",
            trigger: "blur",
          },
        ],
        productName: [
          { required: true, message: "请输入商品名称", trigger: "blur" },
          {
            min: 1,
            max: 10,
            message: "长度在 1 到 10 个字符",
            trigger: "blur",
          },
        ],
        remark: [
          { required: true, message: "请输入备注", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        secondClassification: [
          { required: true, message: "请输入二级分类名称", trigger: "blur" },
          {
            min: 1,
            max: 10,
            message: "长度在 1 到 10 个字符",
            trigger: "blur",
          },
        ],
        shelfLife: [
          { required: true, message: "请输入保质期限", trigger: "blur" },
          {
            min: 1,
            max: 20,
            message: "长度在 1 到 20 个字符",
            trigger: "blur",
          },
        ],
        vendor: [
          { required: true, message: "请输入厂商", trigger: "blur" },
          {
            min: 1,
            max: 10,
            message: "长度在 1 到 10 个字符",
            trigger: "blur",
          },
        ],
        supplier: [
          { required: true, message: "请输入供应商", trigger: "blur" },
          {
            min: 1,
            max: 10,
            message: "长度在 1 到 10 个字符",
            trigger: "blur",
          },
        ],
        unitPrice: [
          { required: true, message: "请输入单价", trigger: "blur" },
          {
            min: 1,
            max: 10,
            message: "长度在 1 到 10 个字符",
            trigger: "blur",
          },
        ],
        unitofmeasurement: [
          { required: true, message: "请输入计量单位", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    // 状态
    async changestatus() {
      this.secondClassification=[]
      this.secondName=""
      if(this.firstName === ""){
        this.ischoice = true
        this.isSecond = true
      }else{
        this.ischoice = false
        const{data:res} = await this.$http.get(`/api/send/getSecondClassificationList?id=${this.firstName}`)
        if(res.code === 200){
          console.log("你好啊")
          console.log(res.data.length)
    

            this.isSecond=false
            console.log(this.isSecond)
        
       for (var i = 0; i < res.data.length; i++) {
        let arrobj = {};
        
        arrobj["value"] = res.data[i].id;
        arrobj["item"] = res.data[i].secondName;
        this.secondClassification.push(arrobj);//数组
      }
          
        }else{
            this.isSecond=true
            console.log(this.isSecond)
          // console.log(this.firstClassification[0].value)
          // return this.$message.error(res.msg)
        }
      }
    },
    //查询商品
    async search() {
      this.loading = true;
      const { data: res } = await this.$http.post(
        "/api/send/getCommodity?pageNum=" +
          this.pageNum +
          "&pageSize=" +
          this.pageSize,
        {
          // 'firstName':this.form.firstName,
          // 'secondName':this.form.secondName,
          // 'startTime':this.form.date[0],
          // 'endTime':this.form.date[1],
          // 'pageNum':this.queryInfo.pageNum,
          // 'pageSize':this.queryInfo.pageSize,
          // 'sort':'true'
        }
      );

      console.log("分页显示商品");
      let getCommodity = res.data;
      this.total = res.total;
      this.queryInfo.pageNum = res.pageNum;
      this.queryInfo.pageSize = res.pageSize;
      console.log(getCommodity);
      this.getCommodity = getCommodity;
      this.loading = false;
    },
    // 有查询功能的分页显示
    async search1() {
      var year = this.form.date[0].getFullYear();
      var month = this.form.date[0].getMonth() + 1;
      var day = this.form.date[0].getDate();
      var hour = this.form.date[0].getHours();
      var minutes = this.form.date[0].getMinutes();
      var second = this.form.date[0].getSeconds();
      var currentTime =
        year +
        "-" +
        (month < 10 ? "0" + month : month) +
        "-" +
        (day < 10 ? "0" + day : day) +
        " " +
        (hour < 10 ? "0" + hour : hour) +
        ":" +
        (minutes < 10 ? "0" + minutes : minutes) +
        ":" +
        (second < 10 ? "0" + second : second);

      var year1 = this.form.date[1].getFullYear();
      var month1 = this.form.date[1].getMonth() + 1;
      var day1 = this.form.date[1].getDate();
      var hour1 = this.form.date[1].getHours();
      var minutes1 = this.form.date[1].getMinutes();
      var second1 = this.form.date[1].getSeconds();
      var currentTime1 =
        year1 +
        "-" +
        (month1 < 10 ? "0" + month1 : month1) +
        "-" +
        (day1 < 10 ? "0" + day1 : day1) +
        "" +
        " " +
        (hour1 < 10 ? "0" + hour1 : hour1) +
        ":" +
        (minutes1 < 10 ? "0" + minutes1 : minutes1) +
        ":" +
        (second1 < 10 ? "0" + second1 : second1);

      if (
        this.form.firstName == "" ||
        this.form.secondName == "" ||
        this.form.startTime == "" ||
        this.form.endTime == ""
      ) {
        return this.$message.error("有错误，查询条件不能为空");
      } else {
        const { data: res } = await this.$http.post(
          "/api/send/getCommodity?pageNum=" +
            this.pageNum +
            "&pageSize=" +
            this.pageSize,
          {
            firstName: this.form.firstName,
            secondName: this.form.secondName,
            startTime: currentTime,
            endTime: currentTime1,
          }
        );
        if (res.code == 200) {
          console.log("分页显示商品");
          let getCommodity = res.data;
          this.total = res.total;
          console.log(getCommodity);
          this.getCommodity = getCommodity;
        } else {
          return this.$message.error(res.msg);
        }
      }
    },
    async addchange() {

    },

    // 获取添加商品的一级分类名称逻辑
    async firstname() {
      const { data: res } = await this.$http.get(
        "/api/send/getFirstClassification?pageNum=" + 1 + "&pageSize=" + 100
      );
      console.log(res);
      for (var i = 0; i < res.data.length; i++) {
        let arrobj = {};
        
        arrobj["value"] = res.data[i].id;
        arrobj["item"] = res.data[i].firstName;
        this.firstClassification.push(arrobj);//数组
      }
      console.log(this.firstClassification);
    },
    // 添加商品
    async add() {
      let firstClassification='';
      let secondClassification=''
      console.log(typeof this.firstClassification);
      this.firstClassification.forEach(x=>{
        console.log("asdasad");
        if(x.value===this.firstName){
          firstClassification=x.item
        }
      })
      this.secondClassification.forEach(x=>{
        console.log("asdasad");
        if(x.value===this.secondName){
          secondClassification=x.item
        }
      })
      const { data: res } = await this.$http.post("/api/send/addCommodity", {
        amount: this.addCommodity.amount,
        commodityCode: this.addCommodity.commodityCode,
        costPrice: this.addCommodity.costPrice,
        discount: this.addCommodity.discount,
        firstClassification,
        inventory: this.addCommodity.inventory,
        isExchange: this.addCommodity.isExchange,
        isReturn: this.addCommodity.isReturn,
        model: this.addCommodity.model,
        productDesccription: this.addCommodity.productDesccription,
        productName: this.addCommodity.productName,
        remark: this.addCommodity.remark,
        secondClassification,
        shelfLife: this.addCommodity.shelfLife,
        supplier: this.addCommodity.supplier,
        unitPrice: this.addCommodity.unitPrice,
        unitofmeasurement: this.addCommodity.unitofmeasurement,
        vendor: this.addCommodity.vendor,
      });
      // if(res.status !== 200) {
      //   return this.$message.error('添加失败')
      //   console.log(res.status)
      //}
      if (res.code == 200) {
        this.getCommodity.push({
          amount: this.addCommodity.amount,
          commodityCode: this.addCommodity.commodityCode,
          costPrice: this.addCommodity.costPrice,
          discount: this.addCommodity.discount,
          firstClassification,
          inventory: this.addCommodity.inventory,
          isExchange: this.addCommodity.isExchange,
          isReturn: this.addCommodity.isReturn,
          model: this.addCommodity.model,
          productDesccription: this.addCommodity.productDesccription,
          productName: this.addCommodity.productName,
          remark: this.addCommodity.remark,
          secondClassification,
          shelfLife: this.addCommodity.shelfLife,
          supplier: this.addCommodity.supplier,
          unitPrice: this.addCommodity.unitPrice,
          unitofmeasurement: this.addCommodity.unitofmeasurement,
          vendor: this.addCommodity.vendor,
        });
        console.log("增加商品");
        console.log(res);
        console.log(res.data);

        this.$message("恭喜你，添加商品成功");
        this.search();
      } else {
        return this.$message.error(res.msg);
      }
    },
    //修改商品
    async update(forName) {
      const { data: res } = await this.$http.post("/api/send/updateCommodity", {
        amount: this.updateCommodity.amount,
        commodityCode: this.updateCommodity.commodityCode,
        costPrice: this.updateCommodity.costPrice,
        discount: this.updateCommodity.discount,
        firstClassification: this.updateCommodity.firstClassification,
        id: this.updateCommodity.id,
        inventory: this.updateCommodity.inventory,
        isExchange: this.updateCommodity.isExchange,
        isReturn: this.updateCommodity.isReturn,
        model: this.updateCommodity.model,
        productDesccription: this.updateCommodity.productDesccription,
        productName: this.updateCommodity.productName,
        remark: this.updateCommodity.remark,
        secondClassification: this.updateCommodity.secondClassification,
        shelfLife: this.updateCommodity.shelfLife,
        supplier: this.updateCommodity.supplier,
        unitPrice: this.updateCommodity.unitPrice,
        unitofmeasurement: this.updateCommodity.unitofmeasurement,
        vendor: this.updateCommodity.vendor,
      });

      if (res.code == 200) {
        this.dialogFormVisible1 = false;
        this.$set(this.getCommodity, this.updateCommodity.index, {
          amount: this.updateCommodity.amount,
          commodityCode: this.updateCommodity.commodityCode,
          costPrice: this.updateCommodity.costPrice,
          discount: this.updateCommodity.discount,
          firstClassification: this.updateCommodity.firstClassification,
          id: this.updateCommodity.id,
          inventory: this.updateCommodity.inventory,
          isExchange: this.updateCommodity.isExchange,
          isReturn: this.updateCommodity.isReturn,
          model: this.updateCommodity.model,
          productDesccription: this.updateCommodity.productDesccription,
          productName: this.updateCommodity.productName,
          remark: this.updateCommodity.remark,
          secondClassification: this.updateCommodity.secondClassification,
          shelfLife: this.updateCommodity.shelfLife,
          supplier: this.updateCommodity.supplier,
          unitPrice: this.updateCommodity.unitPrice,
          unitofmeasurement: this.updateCommodity.unitofmeasurement,
          vendor: this.updateCommodity.vendor,
        });
        console.log(forName);
        console.log("修改商品");
        console.log(res.data);
        this.$message({
          message: "恭喜你，修改商品成功",
          type: "success",
        });
        this.search();
      } else {
        return this.$message.error(res.msg);
      }
    },
    //删除商品
    async delCommodity() {
      // this.$confirm('此操作将删除该供应商, 是否继续?', '提示', {
      //   confirmButtonText: '确定',
      //   cancelButtonText: '取消',
      //   type: 'warning'
      // }).then(() => {
      //   this.$message({
      //     type: 'success',
      //     message: '删除成功!'
      //   });
      // }).catch(() => {
      //   this.$message({
      //     type: 'info',
      //     message: '已取消删除'
      //   });
      // });
      const { data: res } = await this.$http.get("/api/send/deleteCommodity", {
        params: {
          id: this.updateCommodity.id,
        },
      });
      if (res.code == 200) {
        console.log("删除供应商");
        console.log(res);
        this.search();
      } else {
        return this.$message.error(res.msg);
      }
    },

    //表格里面的删除按钮
    //  async del(id) {
    //     const { data:res} = await this.$http.get('/api/send/deleteCommodity',{
    //     params:{
    //       'id':this.scope.row.id
    //     }
    //   })
    //   if(res.code == 200){
    //     this.$message({
    //     message: '恭喜你，成功修改供应商',
    //     type: 'success'
    //   })
    //   console.log(id)
    //   this.search()
    //   }else{
    //     return this.$message.erro(res.msg)
    //   }
    //  },
    handleEdit(index, row) {
      this.dialogFormVisible1 = true;
      this.updateCommodity = Object.assign({}, row);
      this.updateCommodity.index = index;
    },
    async handleDelete(row) {
     this.$confirm("此操作将删除该供应商, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
          const { data: res } =  this.$http.get(
             `/api/send/deleteCommodity?id=${row.id}`);
             console.log(res);
          // if(res.code === 200){
          //   console.log("删除供应商");
          // // this.getSupplier1() 
          //   }else{
          //     return this.$message.error(res.msg)
          //   }
            this.$message({
            type: 'success',
            message: '删除成功!'
            });
            // await this.search()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      await this.search() 
    },
    /* 设置分页效果下的方法 */
    /* 页面大小的改变触发的方法 */
    handleSizeChange(newSize) {
      this.pageSize = newSize;
      this.search();
    },
    /* 页面数发送改变的时候 */
    handleCurrentChange(newPage) {
      this.pageNum = newPage;
      this.search();
    },
    // handleSizeChange: function (size) {
    //   this.queryInfo.pagesize = size;
    //   console.log(this.pagesize)
    //    },
    // handleCurrentChange: function(currentPage){
    //   this.queryInfo.currentPage = currentPage;
    //   console.log(this.currentPage)
    //   }
  },
  created() {
    this.search();
    console.log("s");
    // this.firstname();
  },
};
</script>

<style scoped>
* {
  margin: 0px auto;
  padding: 0px;
}
.el-input {
  width: 200px;
}
.el-input1 {
  margin-left: 20px;
  width: 200px;
}
.el-input2 {
  width: 580px;
}
.btn3 {
  padding: 10px;
  margin-left: 10px;
  background-color: rgb(19, 206, 102);
}
.btn4 {
  padding: 10px;
  margin-left: 10px;
  background-color: rgb(255, 73, 73);
}
.input {
  width: 150px;
  margin-top: 20px;
  margin-left: 10px;
  margin-bottom: 10px;
}
.input2 {
  margin-left: 10px;
  margin-top: 20px;
}
.s {
  margin-right: 10px;
  margin-left: -110px;
}
.s1 {
  margin-right: 10px;
  margin-left: 10px;
}
/* .btn1{
  width: 120px;
  height: 40px;
  margin-left: 10px;
  margin-right: 10px;
} */
.btn1 {
  /* display: inline-block; */
  padding: 10px;
  font-size: 15px;
  margin-left: 10px;
  /* cursor: pointer;
  text-align: center;   
  text-decoration: none;
  outline: none; */
  color: #fff;
  background-color: rgb(32, 178, 170);
  border: none;
  border-radius: 10px;
  /* box-shadow: 0px 0px 20px 0px #999; */
}

.btn1:hover {
  background-color: rgb(19, 206, 102);
}

.btn1:active {
  background-color: rgb(19, 206, 102);
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
</style>